<!-- 小店名称设置 -->
<template>
	<view class="content" :style="{'--color':vuex_config.themeColor1}">
		<view class="shop-item">
			<view class="shop-name">小店名称</view>
			<input class="ipt" v-model="nameValue" type="text"   placeholder="请输入您的小店名称" placeholder-class="place" />
		</view>
		<view class="shop-save" @click="save">确认提交</view>
	</view>
</template>

<script>
	import {
		uniLinkTo
	} from '@/utils/uniPromise.js'
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				nameValue: ''
			}
		},
		
		onLoad:function(){
			this.nameValue = this.vuex_user.store_name || `${this.vuex_user.nickname}的小店`
		},
		
		computed:{
			...mapState(['vuex_user'])
		},
		methods: {
			save() {
				if(!this.nameValue){
					this.$toast({title:'请输入小店名称'})
					return
				}
				this.$loading()
				this.$resPost('UpdateUsersStoreName', {
					store_name: this.nameValue,
					store_status:this.vuex_user.store_status || 0,
					users_id:this.vuex_user.fk_users_id
				}).then(({data})=>{
					this.$hide()
					this.uniBack()
				})
		
		}
	},
	}
</script>

<style lang="scss" scoped>
	.shop-item {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 179rpx;
		margin-bottom: 91rpx;
	}

	.ipt {
		width: 312rpx;
		padding: 10rpx 10rpx;
		border-bottom: 1rpx solid #DDDDDD;
		font-size: 30rpx;
	}

	.shop-name {
		font-size: 30rpx;
		color: #333333;
		font-weight: 500;
		margin-right: 35rpx;
	}

	.place {
		font-size: 30rpx;
		color: #999;
		font-weight: 500;
	}

	.shop-save {
		width: 80%;
		height: 74rpx;
		background-color: var(--color);
		line-height: 74rpx;
		text-align: center;
		font-size: 26rpx;
		color: #fff;
		margin: 0 auto;
		border-radius: 8rpx;
		&:hover{
			opacity: .8;
		}
	}
</style>
